<template>
  <view class="bookshelf-page">
    <!-- 标签栏：借阅中/已归还 -->
    <view class="tabs">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        :class="['tab-item', activeTab === tab.value ? 'active' : '']"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats">
      <view class="stat-item">
        <text class="stat-value">{{ stats.borrowed_count || 0 }}</text>
        <text class="stat-label">借阅中</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.returned_count || 0 }}</text>
        <text class="stat-label">已归还</text>
      </view>
      <view class="stat-item">
        <text class="stat-value">{{ stats.total_count || 0 }}</text>
        <text class="stat-label">总借阅</text>
      </view>
    </view>

    <!-- 借阅列表 -->
    <view class="content">
      <view v-if="loading" class="loading">加载中...</view>
      <view v-else-if="list.length === 0" class="empty">
        <text class="empty-text">暂无借阅记录</text>
      </view>
      <view v-else class="borrow-list">
        <view v-for="item in list" :key="item.id" class="borrow-item">
          <image
            :src="item.cover || '/static/img/default-avatar.png'"
            class="book-cover"
            mode="aspectFill"
          ></image>
          <view class="book-info">
            <text class="book-name">{{ item.book_name }}</text>
            <text class="book-author">{{ item.author }}</text>
            <text class="borrow-date">借阅日期：{{ formatDate(item.borrow_date) }}</text>
            <text class="due-date">应还日期：{{ formatDate(item.due_date) }}</text>
            <view class="status-row">
              <view :class="['status', getStatusClass(item.status)]">
                {{ getStatusText(item.status) }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { myRequest } from '@/util/request.js';

export default {
  name: "Bookshelf",
  data() {
    return {
      // 标签页配置
      tabs: [
        { value: 'all', label: '全部' },
        { value: 'borrowed', label: '借阅中' },
        { value: 'returned', label: '已归还' },
        { value: 'overdue', label: '已逾期' }
      ],
      activeTab: 'borrowed', // 当前选中的标签

      // 统计信息
      stats: {
        borrowed_count: 0,
        returned_count: 0,
        total_count: 0
      },

      // 借阅列表
      list: [],

      // 加载状态
      loading: false
    };
  },
  onShow() {
    this.fetchBorrowRecords();
  },
  methods: {
    // 切换标签
    switchTab(tabValue) {
      this.activeTab = tabValue;
      this.fetchBorrowRecords();
    },

    // 获取借阅记录
    async fetchBorrowRecords() {
      this.loading = true;
      try {
        const data = await myRequest({
          url: '/api/borrow/records',
          method: 'GET',
          data: this.activeTab !== 'all' ? { status: this.activeTab } : {}
        });

        // 后端返回的是数组格式
        this.list = Array.isArray(data) ? data : [];

        // 计算统计信息
        this.calculateStats();
      } catch (e) {
        console.error('获取借阅记录失败', e);
        uni.showToast({ title: '网络错误', icon: 'none' });
        this.list = [];
        this.calculateStats();
      } finally {
        this.loading = false;
      }
    },

    // 计算统计信息
    calculateStats() {
      const records = this.list || [];
      this.stats = {
        borrowed_count: records.filter(item => item.status === 'borrowed').length,
        returned_count: records.filter(item => item.status === 'returned').length,
        total_count: records.length
      };
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '未知';
      const date = new Date(dateStr);
      return date.toLocaleDateString('zh-CN');
    },

    // 获取状态样式类
    getStatusClass(status) {
      const statusMap = {
        'borrowed': 'status-borrowed',
        'returned': 'status-returned',
        'overdue': 'status-overdue'
      };
      return statusMap[status] || 'status-default';
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'borrowed': '借阅中',
        'returned': '已归还',
        'overdue': '已逾期'
      };
      return statusMap[status] || '未知状态';
    }
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.bookshelf-page {
  background: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

/* 标签页样式 */
.tabs {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s;
}

.tab-item.active {
  background: #007aff;
  color: #fff;
}

/* 统计信息样式 */
.stats {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.stat-item {
  flex: 1;
  text-align: center;
  border-right: 2rpx solid #f0f0f0;
}

.stat-item:last-child {
  border-right: none;
}

.stat-value {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 10rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 内容区域样式 */
.content {
  background: #fff;
  border-radius: 16rpx;
  min-height: 600rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.loading {
  text-align: center;
  padding: 60rpx;
  color: #666;
  font-size: 28rpx;
}

.empty {
  text-align: center;
  padding: 120rpx 0;
}

.empty-text {
  color: #999;
  font-size: 28rpx;
}

/* 借阅列表样式 */
.borrow-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.borrow-item {
  display: flex;
  padding: 30rpx;
  background: #fafafa;
  border-radius: 12rpx;
  align-items: center;
}

.book-cover {
  width: 120rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 30rpx;
  background: #f0f0f0;
}

.book-info {
  flex: 1;
}

.book-name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.book-author {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.borrow-date,
.due-date {
  display: block;
  font-size: 24rpx;
  color: #888;
  margin-bottom: 5rpx;
}

.status-row {
  margin-top: 15rpx;
}

.status {
  display: inline-block;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.status-borrowed {
  background: #fff7e6;
  color: #faad14;
}

.status-returned {
  background: #f6ffed;
  color: #52c41a;
}

.status-overdue {
  background: #fff2f0;
  color: #ff4d4f;
}

.status-default {
  background: #f5f5f5;
  color: #666;
}
</style>